<template>
    <div class="container">
        <el-form ref="form" :model="taskInfo" label-width="80px" size="mini">
            <el-row :gutter="20">
                <el-col :span="19">
                    <el-form-item label="任务名称">
                        <el-input v-model="taskInfo.task_name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <div>
                        <el-button type="primary" size="mini" @click="go('zbpz',taskEnterpriseInfoList)">指标配置</el-button>
                        <el-button type="primary" size="mini" @click="rwHandle()">任务配置</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="任务描述">
                        <el-input type="textarea" v-model="taskInfo.task_desc" :autosize="{ minRows: 4, maxRows: 8 }"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12"> <el-form-item label="创建时间">
                        <el-input v-model="taskInfo.create_time" disabled></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人">
                        <el-input v-model="taskInfo.cjr" disabled></el-input>
                    </el-form-item>
                </el-col>

            </el-row>

            <el-form-item>
                <div style="text-align:center;">
                    <el-button type="primary" @click="onSubmit" v-loading="submitLoding">保存</el-button>
                    <el-button @click="back()">返回</el-button>
                </div>
            </el-form-item>
        </el-form>
        <!-- <el-dialog title="指标配置" :visible.sync="zbdialogVisible" append-to-body width="1440px" destroy-on-close top="6vh">
            <div style="padding:20px;height:60vh;">
              <Zbpz/>
            </div>
        </el-dialog> -->

        <el-dialog title="任务配置" :visible.sync="dialogVisible" append-to-body width="840px" destroy-on-close top="6vh">
            <div style="padding:20px;">
                <el-form :model="rwform" size="mini" label-width="100px">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="启动日期">
                                <el-date-picker v-model="rwform.start_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="结束日期">
                                <el-date-picker v-model="rwform.end_time" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="执行任务频率">
                                <el-row :gutter="20">
                                    <!-- <el-col :span="5">
                                        <el-date-picker v-model="rwform.year" value-format="yyyy" type="year" placeholder="年" clearable>
                                        </el-date-picker>
                                    </el-col> -->
                                    <el-col :span="5">
                                        <el-select v-model="rwform.month" placeholder="月" clearable>
                                            <el-option v-for="item in monthOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                        <!-- <el-input v-model="rwform.jgnum" placeholder="月"></el-input> -->
                                    </el-col>
                                    <el-col :span="5">
                                        <el-select v-model="rwform.dd" placeholder="日" clearable>
                                            <el-option v-for="item in dayOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-select v-model="rwform.hh" placeholder="时" clearable>
                                            <el-option v-for="item in hhOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-select v-model="rwform.mm" placeholder="分" clearable>
                                            <el-option v-for="item in ddOption" :key="item.value" :label="item.label" :value="item.value">
                                            </el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>

                            </el-form-item>
                        </el-col>
                        <el-col :span="12">

                        </el-col>
                    </el-row>

                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="mini" @click="confirm">确定</el-button>
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>

            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addTask } from '@/api/znjk/znjk'
import Zbpz from "./configuration";
export default {
    components: {
        Zbpz
    },
    props: {
        taskEnterpriseInfoList: {
            type: Object,
            default: false
        }
    },
    data() {
        return {
            dialogVisible: false,
            zbdialogVisible: false,
            submitLoding: false,
            taskInfo: {
                task_name: '',
                task_desc: '',
                create_time: '',
                create_by: '',
            },
            rwform: {
                start_time: '',
                end_time: '',
                year: '',
                month: '',
                dd: '',
                hh: '',
                mm: '',
                cron_expression: ''
            },
            rwFlag: false,
            monthOption: [],
            dayOption: [],
            hhOption: [],
            ddOption: [],

        }
    },
    mounted() {
        this.initOption()
        if (localStorage.getItem('addForm')) {
            this.taskInfo = JSON.parse(localStorage.getItem('addForm'))
        }
        if (localStorage.getItem('rwform')) {
            this.rwFlag = true
            this.rwform = JSON.parse(localStorage.getItem('rwform'))
        }
        this.taskEnterpriseInfoList ? this.taskEnterpriseInfoList : ''
    },
    methods: {
        initOption() {
            for (let m = 1; m <= 12; m++) {
                this.monthOption.push({
                    label: m,
                    value: m
                })
            }
            for (let i = 1; i <= 31; i++) {
                this.dayOption.push(
                    {
                        label: i,
                        value: i
                    }
                )
            }
            this.dayOption.push({
                label: 'L',
                value: 'L'
            })

            for (let i = 0; i < 24; i++) {
                this.hhOption.push(
                    {
                        label: i,
                        value: i
                    }
                )
            }
            for (let i = 0; i < 60; i++) {
                this.ddOption.push(
                    {
                        label: i,
                        value: i
                    }
                )
            }

        },

        onSubmit() {
            if (this.taskInfo.task_name == '') {
                this.$message.error('请输入任务名称')
                return false
            }
            if (this.taskInfo.task_desc == '') {
                this.$message.error('请输入任务描述')
                return false
            }
            if (!this.taskEnterpriseInfoList) {
                this.$message.error('请进行指标配置')
                return false
            }
            console.log(!this.rwFlag,'!this.rwFlag')
            if (!this.rwFlag) {
                this.$message.error('请进行任务配置')
                return false
            }

            this.submitLoding = true
            console.log(this.taskEnterpriseInfoList)
            let params = {
                quotasInfoList: this.taskEnterpriseInfoList.quotasInfoList,
                taskEnterpriseInfoList: this.taskEnterpriseInfoList.taskEnterpriseInfoList,
                taskInfo: {
                    ...this.taskInfo,
                    ...this.rwform
                }
            }
            addTask(params).then(res => {
                this.submitLoding = false
                if (res.code == 200) {

                    this.$message.success('保存成功')
                    this.go('list')



                    this.taskEnterpriseInfoList = {}
                    localStorage.removeItem('addForm')
                    localStorage.removeItem('rwform')
                }
            })
        },

        back() {
            this.go('list')
            this.taskEnterpriseInfoList = {}
        },

        // 任务配置保存
        confirm() {
            if (this.rwform.start_time == '') {
                this.$message.error('请选择启动时间!')
                return false
            }
            if (this.rwform.end_time == '') {
                this.$message.error('请选择结束时间!')
                return false
            }
            let cron_expression = [
                this.rwform.mm ? this.rwform.mm : '*',
                this.rwform.hh ? this.rwform.hh : '*',
                this.rwform.dd ? this.rwform.dd : '*',
                this.rwform.month ? this.rwform.month : '*',
            ]

            
            let num = 0
            for (let i = 0; i < cron_expression.length; i++) {
                if (cron_expression[i] == '*') {
                    num++
                }
            }
            if (num == 4) {
                this.$message.error('请输入执行任务频率!')
                return false
            } else {
                this.rwform.cron_expression = cron_expression.join(' ') + " ?"
                localStorage.setItem('rwform',JSON.stringify(this.rwform))
            }
            this.rwFlag = true
            this.dialogVisible = false
        },
        rwHandle() {

            this.dialogVisible = true
        },
        zbHandle() {
            this.zbdialogVisible = true
        },
        //待处理
        go(name, params) {
            this.$emit('changePage', name, params);
            localStorage.setItem('addForm', JSON.stringify(this.taskInfo))
        },
    }
}
</script>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    background-color: #fff;
    padding: 15px 50px;

    .btn {
        padding: 8px 8px 8px 0;
    }

    .el-select,
    .el-input,
    .el-date-editor {
        width: 100%;
    }

    .imgIcon {
        width: 30px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .codeC {
        display: flex;
        justify-content: space-between;

        .tabs {
            width: 35px;

            .tabs-item {
                text-align: center;
                padding: 11px;
                height: 80px;
                background-color: rgba(22, 155, 213, 1);
                box-sizing: border-box;

                border-radius: 5px;
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
                font-size: 14px;
                color: #ffffff;
                border-radius: 5px;
            }
        }
    }

    .timeSelct {
        .el-input {
            display: inline;
        }
    }

    .el-dialog .el-dialog__body .el-form .el-select {
        display: inline !important;
    }

    ::v-deep .el-dialog .el-dialog__body .el-form .el-form-item__content {
        width: calc(100% - 100px);
    }
}
</style>